<template>
  <div class="upload-page">
    <div class="upload-btn">
      <a-button :type="btnType" @click="importView">{{ btnName }}</a-button>
    </div>
    <div v-if="showFileList" class="file-list">
      <div v-for="(file, i) in list" :key="file.url" class="file-item">
        <div class="file-name">
          <icon-file style="color: #4687fa" />
          {{ file.name }}
        </div>
        <a-space :size="24">
          <!-- <span>{{ file.fileSize }}</span> -->
          <!-- <icon-eye style="color: #4e5769" @click="view(item)" /> -->
          <icon-to-bottom
            class="click-btn"
            style="color: #4e5769"
            @click="dow(file)"
          />
          <!-- <icon-eye style="color: #4e5769" @click="deleteFile(item)" /> -->
          <icon-delete
            class="click-btn"
            style="color: #4e5769"
            @click="deleteFile(item, i)"
          />
        </a-space>
      </div>
    </div>
  </div>
  <!-- 批量导入对话框 -->
  <upload-container
    v-if="visibleOpen"
    v-model="fileRaw"
    :title="props.title"
    :accept="props.accept"
    :max-size="props.maxSize"
    :limit="props.limit"
    :default-file-list="defaultFileList"
    :multiple="props.multiple"
    :secret-level="secretLevel"
    @close-drawer="closeDrawer"
    @finish="finish"
  ></upload-container>
</template>

<script setup lang="ts">
  import {
    ref,
    defineProps,
    onMounted,
    defineEmits,
    watch,
    computed,
  } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import uploadContainer from './upload-container.vue';

  const importView = () => {
    if (props.multiple && defaultFileList.value.length >= props.limit) {
      Message.error('达到上传文件上限，请删除后再上传！');
      return;
    }
    visibleOpen.value = true;
  };
  const emit = defineEmits(['closeDrawer', 'finish', 'update:modelValue']);
  const props = defineProps({
    modelValue: {
      type: Object,
      default: null,
    },
    btnType: {
      type: String,
      default: 'primary',
    },
    btnName: {
      type: String,
      default: '上传文件',
    },
    title: {
      type: String,
      default: '',
    },
    accept: {
      type: String,
      default: '.xlsx, .xls, .txt',
      required: false,
    },
    maxSize: {
      type: Number,
      default: 10,
    },
    limit: {
      type: Number,
      default: 5,
    },
    // 多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 默认列表 为什么不显示列表
    fileList: {
      type: Array,
      default: () => [],
    },
    showFileList: {
      type: Boolean,
      default: false,
    },
    secretLevel: { type: Number || String, default: undefined },
  });
  const fileRaw = ref<any>({});
  const defaultFileList = ref([]);
  const closeDrawer = () => {
    visibleOpen.value = false;
    emit('closeDrawer');
  };
  // 完成
  const finish = (response: any) => {
    visibleOpen.value = false;
    emit('finish', response);
  };
  const dow = (file) => {
    if (file.url) {
      window.open(file.url);
    }
  };
  const deleteFile = (file, i) => {
    if (props.multiple) {
      fileRaw.value.splice(i, 1);
    } else {
      fileRaw.value = {};
    }
  };
  const visibleOpen = ref(false);
  const list = computed(() => {
    if (props.multiple) {
      return fileRaw.value;
    }
    return [fileRaw.value];
  });
  watch(
    fileRaw,
    () => {
      emit('update:modelValue', fileRaw.value);
      defaultFileList.value = fileRaw.value.length ? fileRaw.value : [];
    },
    {
      deep: true,
    }
  );
  watch(
    () => props.fileList,
    (newVal) => {
      if (newVal && newVal.length) {
        if (props.multiple) {
          fileRaw.value = newVal;
        } else {
          fileRaw.value = newVal ? newVal[0] : {};
        }
      }
    },
    {
      deep: true,
      immediate: true,
    }
  );
  onMounted(() => {
    defaultFileList.value = props.fileList;
  });
</script>

<style lang="less" scoped>
  .arco-btn-text {
    height: unset !important;
    padding: 0 !important;
  }
  .upload-page {
    .upload-btn {
    }
    .file-list {
      .file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .file-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        color: #1e2228;
        background: #f7f9fc;
        border-radius: 6px 6px 6px 6px;
        padding: 0 12px;
        margin: 10px 0;
        .click-btn {
          cursor: pointer;
        }
      }
    }
  }
</style>
